<template>
  <div class="loginInfo">
    <div class="loginInfo-box">
      <a-space direction="vertical" fill :size="20">
        <div>
          <a-space :size="20">
            <div
              style="
                color: #fff;
                font-family: '微软雅黑';
                font-size: 18px;
                font-weight: bold;
              "
              >{{ userInfo.name }}</div
            >
            <span style="color: #fff; font-size: 16px"
              >您好，祝您开心每一天</span
            >
          </a-space>
        </div>
        <div>
          <a-space :size="20">
            <div style="color: #fff">
              登录于：{{ dayjs(loginTime).format('YYYY-MM-DD HH:mm:ss') }}
            </div>
            <!-- <div style="color: #fff">下午 02：58：12</div> -->
          </a-space>
        </div>
      </a-space>
      <div class="bg2" />
      <div class="bg3" />
      <div class="bg4" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import dayjs from 'dayjs';

  const userInfo = JSON.parse(sessionStorage.getItem('loginInfo') as any);
  const loginTime = sessionStorage.getItem('loginTime') as any;
</script>

<style scoped lang="less">
  .loginInfo {
    width: 100%;
    height: 100px;
    background-color: rgb(61, 126, 255);
    border-radius: 10px;
    &-box {
      width: 40%;
      height: 100%;
      margin-left: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bg2 {
      position: absolute;
      left: 802px;
      top: 10px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 50px;
      border-color: transparent transparent rgba(215, 215, 215, 0.3) transparent;
    }
    .bg3 {
      position: absolute;
      left: 860px;
      top: -90px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 100px;
      border-color: transparent transparent rgba(215, 215, 215, 0.3) transparent;
    }
    .bg4 {
      position: absolute;
      left: 1015px;
      top: -10px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 60px;
      border-color: transparent transparent rgba(215, 215, 215, 0.3) transparent;
    }
  }
</style>
